<template>
  <div class="about">
    <div class="app-container">
      <div class="about-container">
        <div class="title">{{ $t('CreditModule2Title') }}</div>
        <div class="info">
          <p>{{ $t('CreditModule2Text1') }}</p>
          <p>{{ $t('CreditModule2Text2') }}</p>
          <p>{{ $t('CreditModule2Text3') }}</p>
        </div>
        <div class="btn">
          <div class="item">{{ $t('CreditModule2Btn1') }}</div>
          <div class="item">{{ $t('CreditModule2Btn2') }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.credit-container .about{
  width: 100%;
  height: 494px;
  background: url("@/assets/images/credit-about-bg.svg") 50% center / cover no-repeat;
  padding-top: 102px;
}

.credit-container .about .about-container{
  width: 50%;
  margin-left: 50%;
}

.credit-container .about .about-container .title{
  font-weight: 600;
  font-size: 36px;
  color: rgb(255, 255, 255);
  position: relative;
}

.credit-container .about .about-container .title::after {
  content: " ";
  position: absolute;
  left: 0px;
  bottom: -5px;
  width: 54px;
  height: 4px;
  border-radius: 3px;
  background-color: var(--color-main);
}

.credit-container .about .about-container .info{
  font-size: 14px;
  color: rgb(255, 255, 255);
  margin-top: 20px;
}

.credit-container .about .about-container .btn{
  height: 45px;
  display: flex;
  margin-top: 30px;
}

.credit-container .about .about-container .btn .item{
  font-size: 18px;
  text-align: center;
  line-height: 45px;
}

.credit-container .about .about-container .btn .item:first-child {
  width: 298px;
  height: 45px;
  background: url("");
  color: rgb(33, 33, 33);
}

.credit-container .about .about-container .btn .item:nth-child(2) {
  width: 268px;
  height: 45px;
  background: url("");
  margin-left: -22px;
  color: var(--color-main);
}
</style>
<script setup>
</script>